<template>
  <div id="app">
    <router-view></router-view>
    <van-tabbar v-model="active"
                active-color="#F03D37"
                v-if="$route.meta.isShow">
      <van-tabbar-item to="/home">
        <span>电影</span>
        <template #icon>
          <i class="iconfont icon-dianying"></i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to='/see'>
        <span>视频</span>
        <template #icon>
          <i class="iconfont icon-shipin1"></i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to='/shortvideo'>
        <span>小视频</span>
        <template #icon>
          <i class="iconfont icon-xiaoshipinyingshi48"></i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to='/show'>
        <span>演出</span>
        <template #icon>
          <i class="iconfont icon-piaoquan"></i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to='/mine'>
        <span>我的</span>
        <template #icon>
          <i class="iconfont icon-wode"></i>
        </template>
      </van-tabbar-item>

    </van-tabbar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: sessionStorage.title,
      active: JSON.parse(sessionStorage.route),
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png'
      }
    }
  },
  created () {
    console.log(1)
    // this.$nextTick(
    //   window.onbeforeunload = function (e) {
    //     e = e || window.event
    //     console.log('更新')
    //     this.$router.push({
    //       path: sessionStorage.route
    //     })
    //   }
    // )
    // this.active = sessionStorage.route
    // console.log('active' + this.active)
  },
  // 这里是watch,不是watched
  watch: {
    $route (newVal) {
      // 存到本地存储，方便获取，否则刷新之后路由变化，又会变成首页
      sessionStorage.title = newVal.meta.title || '猫眼电影'
      sessionStorage.route = newVal.meta.index
      this.title = newVal.meta.title
    }

  }
}
</script>

<style lang="scss">
#app {
  background-color: rgb(244, 244, 244);
  height: 100%;
  padding-bottom: 50px;
}
</style>
